<template>
  <div class="myMain">
    <div class="my">
      <div class="header">
        <div class="bgc"><img
            src="https://tse4-mm.cn.bing.net/th/id/OIP-C.qNM9iH0AxhlSBw9bhN1EZwAAAA?w=198&h=199&c=7&r=0&o=5&pid=1.7"
            alt="">
        </div>
        <div class="userMage"><img :src="user.userInfo.avatar" alt=""></div>
      </div>
      <div class="message">
        <div class="head">
          <svg class="icon icon-shezhi" aria-hidden="true" @click="goSet">
            <use xlink:href="#icon-shezhi"></use>
          </svg>
          <svg class="icon icon-bianji" aria-hidden="true" @click="setInfo">
            <use xlink:href="#icon-bianji"></use>
          </svg>
        </div>
        <div class="main">
          <div class="username">{{ user.userInfo.nickname }}</div>
          <div class="sname">{{ user.userInfo.brief_intro }}</div>
        </div>
      </div>
      <div class="menu-list">
        <ImageWithText v-for="item in menuList" :text="item.text" :name="item.name" :key="item.name"
          @click="menuClick(item.type)" />
      </div>
      <div class="action">
        <div class="head">发布动态</div>
      </div>
    </div>
    <div class="hiden"></div>
    <div class="history">
      <van-tabs v-model:active="active" @click-tab="onClickTab" sticky>
        <van-tab title="宠物">
          <InfoCardList isEdit :list="user.personalCardList" />
        </van-tab>
        <van-tab title="分享">
          <div class="list" v-if="user.shareList.length > 0">
            <concernItem isEdit v-for="(item) in user.personalShareList" :item="item" :key="item.shareposts_id">
            </concernItem>
          </div>
        </van-tab>
      </van-tabs>

    </div>
  </div>
</template>

<script lang="ts" setup>
import InfoCardList from '@/components/InfoCardList.vue';
import { useRouter } from 'vue-router';
import { userStore } from '@/store/index';
import { onMounted } from 'vue';
import ImageWithText from '@/components/imageWithText.vue';
import { menuList } from '@/common/commonMap'
import concernItem from '@/components/concernItem.vue';
const active = 0
const user = userStore()
const router = useRouter()
const setInfo = () => {
  router.push({
    path: '/userInfo'
  })
}
onMounted(() => {
  user.getCardListInfo()
});

const menuClick = (type: string) => {
  if (['collection', 'history'].includes(type)) {
    router.push({
      path: `/collcetOrhistory/${type}`
    })
    return
  }
  router.push({
    path: `/approval/${type}`,
  })
}

const goSet = () => {
  router.push({
    path: '/setting',
  })
}

const onClickTab = (e: any) => {
  if (e.name == 0) {
    user.getCardListInfo()
  } else {
    user.getShareListInfo()
  }
}
</script>

<style lang="less" scoped>
@import url('//at.alicdn.com/t/c/font_4209292_cr3qdmdpoiv.css');

.myMain {
  .my {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 100;

    .header {
      position: relative;
      top: 0;
      width: 100%;
      height: 13rem;
    }

    .header .bgc {
      width: 100%;
      height: 12rem;
      overflow: hidden;

    }

    .header .bgc img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      filter: blur(0.5rem);
    }

    .userMage {
      position: absolute;
      bottom: 0;
      left: 1rem;
      width: 4rem;
      height: 4rem;
      border-radius: 50%;
      border: 0.3rem solid #fff;

      overflow: hidden;
      z-index: 1;
    }

    .userMage img {
      width: 100%;
      height: 100%;
    }

    .message {
      position: relative;
      width: 100%;
      min-height: 5rem;
      background-color: #fff;
      overflow: hidden;
      margin-top: -2rem;
      border-radius: 0.5rem;


    }

    .message .head {
      position: relative;
      box-sizing: border-box;
      padding-top: 1rem;
      padding-right: 1rem;
      gap: 2rem;
      overflow: hidden;

      .icon-shezhi {
        float: right;
        margin-left: 2rem;
      }

      .icon-bianji {
        float: right;
      }
    }

    .message .head .sex {
      position: absolute;
      bottom: 0.5rem;
      left: 5.5rem;
    }

    .main {
      width: 90%;
      min-height: 2rem;
      margin-left: 2rem;
    }

    .main div {
      margin-bottom: 0.5rem;
    }

    .main .username {
      font-size: 1.2rem;
    }

    .main .sname {
      font-size: 0.8rem;
      color: rgb(125, 123, 123);
    }

    .action {
      background-color: #fff;
      margin-top: 1.2rem;
      position: absolute;
      top: 21.2rem;
    }

    .action .head {
      padding-left: 1rem
    }
  }

  .hiden {
    width: 100%;
    height: 5rem;
    position: fixed;
    top: 0;
    background: #fff;
    z-index: 2;
  }

  .history {
    width: 100%;
    position: absolute;
    top: 25rem;
  }

  .menu-list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 3;
    height: 8rem;
    margin-top: -1px;
    background: white;
  }

  .list {
    width: 100%;
    position: relative;
    box-sizing: border-box;
  }
}
</style>
